// 1 找到图片
// 2 剪裁配置项
// 3 调用cropper方法,实现初始的效果
let image=$('#image');
let option ={
    aspectRatio: 1,
    preview: '.img-preview'
}
image.cropper(option);
// 点击上传
$('button:contains("上传")').on('click',function(){
    //  只执行
    $('#file').trigger('click');
})
// 选择图片,更换裁剪区的图片
$('#file').on('change',function(){
    if(this.files.length >0){
        // 找到文件 console.dir(this);
        let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
        // console.log(url);
        // 更换裁剪区的图片
        // image.cropper('destroy').attr('src',url).cropper(option)
        image.cropper('replace',url)
    }
})




// 点击'确认'按钮   剪裁图片    转换成base64格式     提交接口
$('button:contains("确定")').on('click',function(){
    let canvas = image.cropper('getCroppedCanvas',{width:30,height:30});
    // canvas有一套内置的API方法
    let base64 = canvas.toDataURL('image/jpeg',0.3);
     console.log(base64)
    axios.post('/my/user/avatar',`avatar=${encodeURIComponent(base64)}`).then(res=>{
        let {status,message} = res.data;
        if(status===0){
        layer.msg(message);
        // 更换了头像 更新父(index.html)的头像
       window.parent.getUserInfo();
    }
    })
})